<template>
  <el-submenu :index="menu.id">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">{{menu.name}}</span>
    </template>
    <template v-if="menu.isFolder && menu.children.length > 0">
      <template v-for="(subMenu, index) in menu.children">
        <!-- 递归递进 -->
        <SubMenu v-if="subMenu.isFolder" :key="subMenu.id + index" :menu="subMenu"></SubMenu>
        <!-- 递归出口 -->
        <MenuItem v-else :key="subMenu.id + index" :menuItem="subMenu">
        </MenuItem>
      </template>
    </template>
    <template v-else>
      <!-- 递归出口 -->
    </template>
  </el-submenu>
</template>

<script>
import MenuItem from './MenuItem' // 叶子节点菜单

export default {
  name: "SubMenu",
  components: {
    // SubMenu,
    MenuItem
  },
  props: [
    'menu' //菜单数据
  ],
}
</script>

<style>
</style>